﻿<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>正在加载请稍候...</title>
    <link href="../Comm/fonts/font-icons.min.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <!--表单样式-->
    <link href="../Admin/CSS/FoolFrmBody.css" rel="stylesheet" />
    <!-- layui -->
    <link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <link href="../Scripts/layui/style/admin.css" rel="stylesheet" />
    <link href="../Scripts/layui/layui/css/autocomplete.css" rel="stylesheet" />
    <script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <script src="../Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <!--通用的JS-->
    <script src="JS/jquery.mousewheel.min.js"></script>
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="./JS/tinymce/tinymce.min.js"></script>
    <script src="ChapterFrmGener.js"></script>
    <script src="./JS/jspdf.min.js"></script>
    <script src="./JS/html2canvas.min.js"></script>
    <script src="JS/FrmDBRemark.js" type="text/javascript"></script>
    <script src="../../WF/CCForm/FrmEnd.js"></script>
    <script src="../Comm/JScript.js"></script>
    <script src="../../WF/Portal/layui/layui.js" type="text/javascript"></script>
    <script src="FrmFool.js" type="text/javascript">></script>
    <script language="javascript" type="text/javascript">
        layui.use(['tree', 'dropdown', 'form', 'jquery'], function () {
            var tree = layui.tree, $ = layui.jquery, dropdown = layui.dropdown;
            var frmID = null;
            var oid = null;
            var name = null;
            var apArr = [];
            var group = [];
            var ptype = null;
            var form = layui.form;
            var hideGroup;//存储隐藏的章节
            var hideAttrs;//存储隐藏的字段
            var groupFields = [];//章节分组.
            var attrs = [];//字段.
            var data = [];//表单所有信息，ChapterFrm_Init获取
            //页面启动函数.
            $(function () {
                frmID = GetQueryString("FrmID");
                oid = GetQueryString("WorkID");
                if (oid == null)
                    oid = GetQueryString("OID");


                var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                handler.AddPara("FrmID", frmID);
                handler.AddPara("OID", oid);
                data = handler.DoMethodReturnJSON("ChapterFrm_Init");
                console.log(data);
                groupFields = data["GroupFields"];//章节分组.
                attrs = data["Sys_MapAttr"];//字段.

                //获取显示状态信息
                var en = new Entity(frmID, oid);
                console.log("获取的表单设置信息：", en);
                //存储显示状态
                hideGroup = en.GetPara("HideGroup") || "";

                if (hideGroup == "")
                    hideGroup = [];
                else hideGroup = hideGroup.split(',');
                hideAttrs = en.GetPara("HideAttrs") || "";
                if (hideAttrs == "")
                    hideAttrs = [];
                else hideAttrs = hideAttrs.split(',');
                console.log("显示状态", hideGroup, hideAttrs);

                //形成树形数据
                groupFields.forEach((item) => {
                    if (item.ParentOID === "" || item.ParentOID == null) {
                        var child = {
                            id: item.OID.toString(),
                            title: item.Lab,
                            children: [],
                            ...item,
                        };
                        if (hideGroup.indexOf(child.id) == -1) {//看设置是否隐藏
                            if (item.CtrlType === "Attr") {//Attr控件将其下的字段值放在attrChildren 中方便解析
                                child.attrChildren = getAttrChildren(item.OID.toString(), item.CtrlType);
                            } else {
                                child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
                            };
                            group.push(child);
                        };
                    }
                });
                console.log("树形数组", group);

                var html = "";
                html += setTree(group, 1);
                $("#CCForm").html(html);//插入表单html
                //渲染layui表单样式
                form.render();
                form.render('checkbox');
                //占一行的元素标签靠左
                var hang = $(".layui-col-sm12.layui-col-md12.layui-col-xm12.FoolFrmFieldLabel>.layui-form-label");
                $.each(hang, function (index, item){
                    $(item).attr("style", "text-align:left");
                })
                //iframe高度自适应
                var thisForm = $('#CCForm');
                var iframes = $(thisForm).find("iframe");
                for (var j = 0; j < iframes.length; j++) {

                    $(iframes[j]).load(function () {
                        var mainheight = $(this).contents().find("body").height();
                        $(this).height(mainheight);
                    });
                }
                loadData(group, 1);
                return;

                //解析Attr类型分组
                function IniAttr(group) {
                    var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                    handler.AddPara("FK_MapData", frmID);
                    handler.AddPara("OID", GetQueryString("WorkID"));
                    var result = handler.DoMethodReturnString("ChapterFrm_AttrInit");
                    if (result.indexOf('err@') == -1) {
                        data.MainTable[0] = JSON.parse(result);
                    }
                    var attrhtm = "";
                    var thisAttrData = {//改造数据，主要是Sys_MapAttr的字段显示与隐藏
                        ...data,
                        Sys_MapAttr: Array.isArray(group.attrChildren) && group.attrChildren.length > 0 ? group.attrChildren : group.children,
                    }

                    attrhtm += '<div id="Group_' + group.OID + '">';
                    var tableCol = data.Sys_MapData[0].TableCol === 0 ? 4 : 6;
                    attrhtm += InitMapAttr(thisAttrData, tableCol, group.OID);
                    attrhtm += '</div>';
                    return attrhtm;
                }
                function LoadFrmData(group) {
                    var thisAttrData = {//改造数据，主要是Sys_MapAttr的字段显示与隐藏
                        ...data,
                        Sys_MapAttr: Array.isArray(group.attrChildren) && group.attrChildren.length > 0 ? group.attrChildren : group.children,
                    }
                    //装载表单数据与修改表单元素风格.
                    LoadFrmDataAndChangeEleStyle(thisAttrData, group.attrChildren);
                    //渲染表单
                    form.render();
                    form.render('checkbox');
                    //解析表单的扩展功能
                    AfterBindEn_DealMapExt(thisAttrData);
                    $.each($(".ccdate"), function (i, item) {
                        var format = $(item).attr("data-info");
                        var type = $(item).attr("data-type");
                        if (format.indexOf("HH") != -1) {
                            layui.laydate.render({
                                elem: '#' + item.id,
                                format: $(item).attr("data-info"), //可任意组合
                                type: type,
                                trigger: 'click',
                                ready: function (date) {
                                    var now = new Date();
                                    var mm = "";
                                    if (now.getMinutes() < 10)
                                        mm = "0" + now.getMinutes();
                                    else
                                        mm = now.getMinutes();

                                    var ss = "";
                                    if (now.getSeconds() < 10)
                                        ss = "0" + now.getSeconds();
                                    else
                                        ss = now.getSeconds();

                                    this.dateTime.hours = now.getHours();
                                    this.dateTime.minutes = mm;
                                    this.dateTime.seconds = ss;
                                },
                                change: function (value, date, endDate) {
                                    $('.laydate-btns-confirm').click();
                                },
                                done: function (value, date, endDate) {
                                    var data = $(this.elem).data();
                                    $(this.elem).val(value);
                                    if (data && data.ReqDay != null && data.ReqDay != undefined)
                                        ReqDays(data.ReqDay);
                                }
                            });
                        } else {
                            layui.laydate.render({
                                elem: '#' + item.id,
                                format: $(item).attr("data-info"), //可任意组合
                                type: type,
                                done: function (value, date, endDate) {
                                    var data = $(this.elem).data();
                                    $(this.elem).val(value);
                                    if (data && data.ReqDay != null && data.ReqDay != undefined)
                                        ReqDays(data.ReqDay);
                                }
                            });
                        }

                    })
                }
                
                //遍历树形数组
                function setTree(list, level) {
                    var htm = "";
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].Lab != undefined) {//当前节点是一个目录
                            htm += findTitleLevel(level, list[i].title)
                            if (Array.isArray(list[i].children) && list[i].children.length > 0) {
                                var type = setTree(list[i].children, level + 1);
                                if (type == "MapAttr") {
                                    list[i].children.forEach((attr) => {
                                        var cdata = data['MainTable'][0][attr.KeyOfEn];
                                        htm += '<div class="layui-form-item layui-form-text">';
                                        htm += '<label class="layui-form-label" style="margin-left: 32px;text-align:left">' + attr.Name + '</label>';
                                        htm += '<div class="layui-input-block" style="margin-left: 32px;">';
                                        htm += `<div name="TB_${attr.KeyOfEn}" id="TB_${attr.KeyOfEn}" class="div-textarea" >${cdata}</div>`;
                                        htm += '</div> </div>';
                                    })
                                } else {//否则就是一个html字符串
                                    htm += type;
                                }
                            } else if (list[i].CtrlType == "Attr" && Array.isArray(list[i].attrChildren) && list[i].attrChildren.length > 0) {
                                htm += '<div class="layui-fluid fluid">';
                                htm += '<div class="layui-row layui-col-space15" id="ContentDiv_' + list[i].OID + '">';
                                htm += '<div class="layui-col-md12">';
                                htm += '<div class="layui-card">';
                                htm += '<div class="layui-card-body">';
                                htm += '<form id="divCCForm_' + list[i].OID + '" class="layui-form">';
                                htm += IniAttr(list[i]);
                                htm += '</form>';
                                htm += '</div></div ></div ></div ></div >';
                            } else if (list[i].CtrlType == "Dtl") {
                                var url = Ele_Dtl_Chapter(list[i].CtrlID, 1);
                                htm += '<div class="layui-form">';
                                htm += '<iframe id="' + list[i].OID + '" src="' + url + '" frameborder="0" style="width: 100%;height:auto; overflow-y: scroll;" ></iframe>';
                                htm += '</div>';
                            } else if (list[i].CtrlType == "Ath") {
                                var url = basePath + "/WF/CCForm/Ath.htm?1=1&AthPK=" + list[i].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
                                htm += '<div class="layui-form">';
                                htm += '<iframe id="' + list[i].OID + '" src="' + url + '" frameborder="0" style="width: 100%;height:auto;" scrolling="no" ></iframe>';
                                htm += '</div>';
                            } else if (list[i].CtrlType == "ChapterFrmLinkFrm") {
                                var url = basePath + "/WF/CCForm/Frm.htm?IsReadonly=1&FrmID=" + list[i].CtrlID + "&OID=" + oid + "&FK_MapData=" + list[i].CtrlID + "&FK_Node=" + GetQueryString("FK_Node");
                                htm += '<div class="layui-form">';
                                htm += '<iframe id="' + list[i].OID + '" src="' + url + '" frameborder="0"  style="width: 100%;" scrolling="no"></iframe>';
                                htm += '</div>';
                            } else if (list[i].CtrlType == "ChapterFrmSelfUrl") {
                                var url = '';
                                if (list[i].CtrlID.indexOf('http') == 0)
                                    if (list[i].CtrlID.indexOf('?') > -1) {
                                        url = list[i].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                                    } else {
                                        url = list[i].CtrlID + "?" + "OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                                    }
                                else {
                                    if (list[i].CtrlID.indexOf('?') > -1) {
                                        url = basePath + "/" + list[i].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                                    } else {
                                        url = basePath + "/" + list[i].CtrlID + "?" + "OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                                    }
                                }
                                htm += '<div class="layui-form">';
                                htm += '<iframe id="' + list[i].OID + '" src="' + url + '" frameborder="0" style="width: 100%;" scrolling="no" ></iframe>';
                                htm += '</div>';
                            }
                        } else {//当前列表的节点没有CtrlType字段 ，说明是一个mapAttr的集合
                            console.log(list[i].Lab);
                            return "MapAttr";
                        }
                    }
                    return htm;
                };
                //遍历树形数组给AttrF分组赋值
                function loadData(list, level) {
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].Lab != undefined) {//当前节点是一个目录
                            if (Array.isArray(list[i].children) && list[i].children.length > 0) {
                                loadData(list[i].children, level + 1);
                            } else if (list[i].CtrlType == "Attr" && Array.isArray(list[i].attrChildren) && list[i].attrChildren.length > 0) {
                                LoadFrmData(list[i]);
                            } 
                        } 
                    }
                };
            });

            //第几级标题
            function findTitleLevel(level, name) {
                var indent = 10*(level-1);
                switch (level) {
                    case 1:
                        return "<h1 style='margin:10px; margin-left:" + indent + "px'>" + name + "</h1>";
                    case 2:
                        return "<h2 style='margin:10px; margin-left:" + indent + "px'>" + name + "</h2>";
                    case 3:
                        return "<h3 style='margin:10px; margin-left:" + indent + "px'>" + name + "</h3>";
                    case 4:
                        return "<h4 style='margin:10px; margin-left:" + indent + "px'>" + name + "</h4>";
                    case 5:
                        return "<h5 style='margin:10px; margin-left:" + indent + "px'>" + name + "</h5>";
                    case 6:
                        return "<h6 style='margin:10px; margin-left:" + indent + "px'>" + name + "</h6>";


                };
            };

            


            //递归构造章节树形结构，获取parentId的孩子
            function getChildren(parentId) {
                var children = [];
                groupFields.forEach((item) => {
                    if (item.ParentOID === parentId) {
                        var child = {
                            id: item.OID.toString(),
                            title: item.Lab,
                            children: [],
                            attrChildren: [],
                            ...item,
                        };
                        if (hideGroup.indexOf(child.id) == -1) {//看设置是否显示
                            if (item.CtrlType === "Attr") {
                                child.attrChildren = getAttrChildren(item.OID.toString(), item.CtrlType);
                            } else {
                                child.children = [...getChildren(item.OID.toString()), ...getAttrChildren(item.OID.toString(), item.CtrlType)];
                            };
                            children.push(child);
                        };

                    }
                });
                return children;
            }

            //获取本章节下的attr字段，groupId下的字段
            function getAttrChildren(groupId, ctrlType) {
                var attrList = [];
                //非Attr型控件，非默认控件，不显示其下字段
                if (ctrlType != "Attr" && ctrlType != "" && ctrlType != null)
                    return [];

                for (var i = 0; i < attrs.length; i++) {
                    var attr = attrs[i];
                    if (attr.MyDataType != 1 && ctrlType == "")
                        continue;
                    if (attr.GroupID === groupId && attr.UIVisible === 1) {//只显示可见的字段
                        var attr = {
                            id: attr.KeyOfEn,
                            title: attr.Name,
                            ...attr,
                        };
                        if (attr.UIContralType == 1) {//如果是下拉框，存储下拉列表值
                            if (attr.MyDataType == 2)//枚举下拉
                                attr.DDLlist = $.grep(data['Sys_Enum'], function (item, index) {
                                    return item.EnumKey == attr.KeyOfEn;
                                });
                            else if (attr.MyDataType == 1)//下拉单选
                                attr.DDLlist = data[attr.KeyOfEn];
                        }
                        else if (attr.UIContralType == 3 && attr.MyDataType == 2) {//枚举单选 radio
                            attr.DDLlist = $.grep(data['Sys_Enum'], function (item, index) {
                                return item.EnumKey == attr.KeyOfEn;
                            });
                        }
                        if (hideAttrs.indexOf(attr.KeyOfEn) == -1) {//看是否设置显示
                            if ((ctrlType === "" || ctrlType == null) && attr.TextModel != 1) {//默认型控件，只显示文本字段
                                if (attr.MyDataType == 1 && attr.UIContralType == 0) {
                                    attrList.push(attr);
                                };
                            } else if (ctrlType === "Attr") {//Attr控件所有类型的字段都显示
                                attrList.push(attr);
                            };
                        };
                    };

                };
                return attrList;
            }


            function showType(group, Tree_set) {
                let n = 0;
                group.forEach((item, index) => {
                    if (item.ShowType == 2) {
                        n = n + 1;
                        const Id = item.OID;
                        console.log($(`#Pnode${Id}`))
                        $(`#Pnode${Id}`).hide()
                    }
                })
                if (n == group.length) {
                    $("#menuShow").hide()
                }
            }

            function ChapterFrmShow(attrKey) {
                InitPara();
                if (attrKey == null || attrKey == "") {
                    alert("字段值为空.");
                    return;
                }
                var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                handler.AddPara("FrmID", frmID);
                handler.AddPara("OID", oid);
                handler.AddPara("KeyOfEn", attrKey);
                var data = handler.DoMethodReturnString("ChapterFrm_InitOneField");
                AddNoDuplicateElements(attrKey, data);

            }
            //添加title名
            function addtitle(key) {
                group.forEach((item, index) => {
                    if (item.children.length > 0) {
                        item.children.forEach(ite => {
                            if (ite.id == key) {
                                name = ite.Name;
                                $("#Title").html(name)

                            }
                        })
                    }
                });
            }

            //append html
            function AddNoDuplicateElements(ele, data) {

                if (ptype != 'print') {
                    var aphtml = `<div class="itemlist" id="ele_${ele}"><div id="title_${ele}"></div><div><h4 id="n_${ele}"></h4><p>${data}</p></div></div>`
                    var arr = []
                    arr.push(ele)
                    for (var i = 0; i < arr.length; i++) {
                        if (apArr.indexOf(arr[i]) === -1) {
                            apArr.push(arr[i]);
                            $("#docs").append(aphtml);
                        }
                    }
                    $("#docs .itemlist").hide();
                    $("#ele_" + ele).show();
                    addtitle(ele)
                } else {
                    var aphtml = `<div class="itemlist"><div id="tit_${ele}"></div><div><h4 id="nt_${ele}"></h4><p>${data}</p></div></div>`
                    $("#print").append(aphtml);
                    addtitle(ele)
                }


            }
        })

    </script>

    <style type="text/css">
        .div-textarea {
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
            border-color: #eee;
            box-sizing: border-box;
            min-height:100px;
            padding:10px;
        }
        .border_1 {
            border: 1px solid #ccc;
            height: 96vh;
        }

        .padding-5 {
            padding: 10px;
        }

        .layui-right {
            width: 120px;
            height: 100%;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 0;
        }

            .layui-right a {
                display: block;
                height: 100%;
                width: 100%;
            }

        .layui-left {
            width: 60px;
            height: 100%;
            text-align: center;
            position: absolute;
            left: 20px;
            top: 0;
        }

            .layui-left a {
                display: block;
                height: 100%;
                width: 100%;
            }

        .tree-txt-active {
            background: #dcdcdc;
        }

        .layui-card-body {
            height: 80vh;
            overflow: hidden
        }

        .layui-tree-entry .layui-tree-txt {
            font-weight: 600;
        }

        .layui-tree-pack .layui-tree-txt {
            font-weight: 300;
        }

        .layui-tab-title {
            text-align: center
        }

        #toIframe {
            display: none;
            width: 100%;
            border: none;
            height: 96vh !important;
          
        }

        .layui-tab-content {
            padding: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .h-100 {
            height: 96vh;
            overflow: auto;
        }

        .site-dropdown-demo,
        .site-dropdown-demo .layui-menu {
            background-color: #000;
            border: none;
        }

            .site-dropdown-demo .layui-menu li {
                color: #fff;
            }

                .site-dropdown-demo .layui-menu li:hover {
                    background-color: #333;
                }

        #docs {
            height: 96vh;
            overflow: auto;
        }

        .layui-card {
            height: auto;
        }

        .layui-card-body {
            height: auto
        }

        #print .itemlist {
            margin-bottom: 10px;
        }

            #print .itemlist h3 {
                margin-bottom: 10px;
                text-align: center
            }

        .labelTitle {
            height: 40px;
            text-align: center;
            padding-right: 28px;
            line-height: 40px;
            background: #fff;
            font-size: 18px;
            font-weight: bold;
            width: 90%;
        }

        .layui-card-header {
            display: block ruby;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px #999;
            background-color: #999;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #ddd;
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar {
            width: 4px;
            height: 0px;
            background-color: #F5F5F5;
        }

        .rate {
            margin: 5px;
        }
        .layui-form-label {
            width: calc(100% - 48px);
            float:none;
        }
        .mustInput{
            float:right;
        }
    </style>
</head>

<body id="content" style="overflow:scroll;display:flex;justify-content:center;width:100%">


    <!--startprint1-->
    <form class="layui-form" style="width: 80%">
        <div class="layui-row" style="width: 100%">
            <div class="layui-col-sm9 layui-col-md9 layui-col-xs9" style=" width: 100%">
                <div class="layui-card">
                    <div class="layui-card-body" id="CCForm">
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    <!--endprint1-->

</body>

</html>